<template>
  <el-container class="common-layout">
    <el-header class="header">
      <img src="../../assets/electron.svg" alt="Logo" class="logo" />
      <span class="title">桌面开发</span>
    </el-header>
    <el-row justify="center" align="middle" style="width: 100%">
      <el-col :span="14">
        <el-card>
          <div class="header" style="padding: 0px">
            <el-icon size="2em"><Message /></el-icon>
            <h1 style="margin-left: 5px">消息中心</h1>
          </div>
          <el-tabs v-model="activeTab">
            <el-tab-pane>
              <template #label>
                <span>未读</span>
                <el-badge :value="unreadCount" :offset="[5, -5]" class="badge"></el-badge>
              </template>
              <div name="unread"></div>
            </el-tab-pane>
            <el-tab-pane label="已读" name="read"></el-tab-pane>
          </el-tabs>
          <el-table :data="messages" style="width: 100%">
            <el-table-column prop="title" label="标题" width="280"></el-table-column>
            <el-table-column prop="time" label="时间" width="280"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button @click="viewDetails(scope.row)" type="text">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

// 定义消息的接口
interface Message {
  title: string
  time: string
}

export default defineComponent({
  setup() {
    const activeTab = ref('unread')
    const unreadCount = ref(5) // 假设未读消息数量为5
    const messages = ref<Message[]>([
      { title: '设备到期提醒', time: '2024-12-05 10:05:34' },
      { title: '设备到期提醒', time: '2024-12-05 10:05:34' },
      { title: '设备到期提醒', time: '2024-12-05 10:05:34' },
      { title: '设备到期提醒', time: '2024-12-05 10:05:34' },
      { title: '设备到期提醒', time: '2024-12-05 10:05:34' },
      { title: '设备到期提醒', time: '2024-12-05 10:05:34' },
      { title: '设备到期提醒', time: '2024-12-02 10:06:42' }
      // ... 其他消息
    ])

    const viewDetails = (message: Message) => {
      console.log('查看详情:', message)
    }

    return {
      activeTab,
      unreadCount,
      messages,
      viewDetails
    }
  }
})
</script>

<style scoped>
.common-layout {
  width: 100%;
  height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  padding: 10px;
}

.logo {
  height: 40px;
}

.title {
  margin-left: 10px;
  font-size: 18px;
  font-weight: bold;
}

h1 {
  margin-bottom: 20px;
}
</style>